<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>My JSP 'formCheck.jsp' starting page</title>
    
	<style type="text/css">
		input {
			border-radius: 4px;
		}
		input.error {
			border: 1px solid #ea6f3e;
		}
		label.error {
			color: red;
    		margin-left: 5px;
		}
	</style>
	<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
  	<script type="text/javascript" src="jquery.validate.js"></script>
  	<script type="text/javascript">
  		$().ready(function() {
  			$("form").validate({
  				rules: {
  					n: "required",
  					p: {
  						required: true
  					},
  					mobile: {
  						mobile: true
  					},
  					tel: {
  						pattern: /^\d{3,4}-?\d{7,9}$/
  					},
  					img: {
  						required: true,
  						extension: "jpg,png"
  					}
  				},
  				submitHandler: function(form) {
  					alert("提交表单");
  				}
  			});
  		});
  	</script>
  </head>
  
  <body>
    <form action="" method="get">
    	<table>
    		<tr>
    			<th>用户名</th>
    			<!-- placeholder:html5的新特性 -->
    			<td><input type="text" name="n" placeholder="用户名"/></td>
    		</tr>
    		<tr>
    			<th>密码</th>
    			<td><input type="password" name="p" placeholder="密码"/></td>
    		</tr>
    		<tr>
    			<th>手机号</th>
    			<td><input type="text" name="mobile"/></td>
    		</tr>
    		<tr>
    			<th>座机</th>
    			<td><input type="text" name="tel"/></td>
    		</tr>
    		<tr>
    			<th>头像</th>
    			<td><input type="file" name="img"/></td>
    		</tr>
    		<tr>
    			<th>&nbsp;</th>
    			<td><input type="submit" value="提交"/></td>
    		</tr>
    	</table>
    </form>
  </body>
</html>
